<template>
    <view v-show="isEmpty" class="backgroundlinear">
        <LaSwiper :content="goodsData?.goodsImageList" />

        <!-- <view class="scribingPrice" v-if="goodsData.scribingPrice">
			<view class="yugu">
				<span>预估到手价：￥</span>
				<span style="font-size: 30px;color: red;">{{goodsData.price}}</span>
				<span style="text-decoration: line-through">￥{{goodsData.scribingPrice}}</span>
			</view>
			<view class="yuanjia">
				<span>预估到手价=￥{{goodsData.scribingPrice}}(原价)-{{goodsData.scribingPrice-goodsData.price}}(优惠)</span>
			</view>
		</view> -->
        <view class="timeLimit" v-if="goodsData.scribingPrice">
            <div>
                <view class="lefttop" hover-class="none" hover-stop-propagation="false"> </view>
                <view class="leftbottom" hover-class="none" hover-stop-propagation="false">
                    <div class="text1">预估到手</div>
                    <div class="text2">￥</div>
                    <div class="text3">{{ goodsData.price }}</div>
                    <div class="text4">原价¥{{ goodsData.scribingPrice }}</div>
                </view>
            </div>
            <div></div>
        </view>
        <view class="titleview_1">
            <view class="topView" hover-class="none" hover-stop-propagation="false">
                {{ goodsData.name }}
            </view>

            <view class="bottomView flex justify-between padding" style="padding-left: 0">
                <view class="text-xs normal" color="#707070">
                    {{ goodsData.orderNum }}人预约过
                </view>
                <!-- <view class="flex" @click="handleCollection(goodsData.collect)">
					<image class="collection" v-if="!goodsData.collect" src="/static/images/icon_collection.png">
					</image>
					<image class="collection" v-else src="/static/images/icon_collection_s.png"></image>
					<text style="color: #707070;">{{ goodsData.collect ? '取消收藏' : '收藏' }}</text>
				</view> -->
            </view>
        </view>

        <!-- <card :title="goodsData.name" :border_bottom="false">
			 
			<view class="flex justify-between padding">
				<view class="text-xs normal" color="#707070">
					{{ goodsData.orderNum }}人预约过
				</view>
				<view class="flex" @click="handleCollection(goodsData.collect)">
					<image class="collection" v-if="!goodsData.collect" src="/static/images/icon_collection.png">
					</image>
					<image class="collection" v-else src="/static/images/icon_collection_s.png"></image>
					<text>{{ goodsData.collect ? '取消收藏' : '收藏' }}</text>
				</view>
			</view>
		</card> -->

        <!-- 规格选择 -->
        <goods-spec ref="goodsSpecRef" :goodsImage="goodsData.goodsImageList" :goodsName="goodsData.name"
            :goodsoutNumber="goodsData.outNumber" :goodsPrice="goodsData.price" :goodsList="goodsData.list"
            :unitDesc="goodsData.unit" :buyNumber="goodsData.buyNumber" :priceTitle="priceTitle" :opid="options2.id"
            @confirm="handleOrder" />

        <!-- 服务师傅 -->
        <!-- <card title="服务师傅"> -->
        <div style="
                margin-top: 20rpx;
                background-color: #fff;
                background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240911/5c91c13f-def1-413e-990b-d768bc48c765.png');
                background-size: 100% 80rpx;
                background-repeat: no-repeat;
                border-top-left-radius: 24rpx;
                border-top-right-radius: 24rpx;
                min-height: 200rpx;
            ">
            <div style="
                    display: flex;
                    justify-content: space-between;
                    padding: 20rpx 30rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 32rpx;
                    color: rgba(255, 255, 255, 0.9);
                    line-height: 38rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                ">
                <div>服务师傅</div>
            </div>
            <view class="w-full overflow-hidden">
                <scroll-view class="whitespace-nowrap pt-[20rpx] pl-[30rpx]" scroll-x="true">
                    <block v-for="item in goodsData.staffList" :key="item.id">
                        <view class="w-[100rpx] mr-[54rpx] text-center inline-block" @click="
                                goPage(`/bundle/pages/master_worker_detail/index?id=${item.id}`)
                            ">
                            <u-image :src="item?.userVo?.avatar" width="100" height="100" border-radius="50%"></u-image>
                            <view class="truncate normal mt-[20rpx] text-base">{{
                                item.name
                                }}</view>
                        </view>
                    </block>
                </scroll-view>
            </view>
        </div>
        <!-- </card> -->

        <!-- 用户评价 -->
        <div style="
                margin-top: 20rpx;
                background-color: #fff;
                background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240911/5c91c13f-def1-413e-990b-d768bc48c765.png');
                background-size: 100% 80rpx;
                background-repeat: no-repeat;
                border-top-left-radius: 24rpx;
                border-top-right-radius: 24rpx;
                min-height: 200rpx;
            ">
            <div style="
                    display: flex;
                    justify-content: space-between;
                    padding: 20rpx 30rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 32rpx;
                    color: rgba(255, 255, 255, 0.9);
                    line-height: 38rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                ">
                <div>用户评价</div>
                <template #header-right>
                    <view class="flex text-sm text-muted"
                        @click="goPage2(`/bundle/pages/evaluate_goods/index?id=${goodsId}`)">
                        <text class="mr-[14rpx]" style="color: #fff">全部评价</text>
                        <u-icon name="arrow-right" color="#fff" size="22"></u-icon>
                    </view>
                </template>
            </div>
            <template v-if="goodsData.goods_comment.length">
                <block v-for="commenItem in goodsData.goods_comment" :key="commenItem.id">
                    <view class="comment mt-[20rpx]">
                        <view class="flex p-[20rpx]">
                            <u-image :src="commenItem.avatarUrl" width="80" height="80" border-radius="50%"></u-image>
                            <view class="ml-[20rpx]">
                                <view class="text-base normal">{{ commenItem.nickname }}</view>
                                <view class="text-xs text-muted">{{ commenItem.updateTime }}</view>
                            </view>
                        </view>
                        <view class="text-base normal ml-[20rpx] line-3">{{
                            commenItem.comment
                            }}</view>
                    </view>
                </block>
            </template>
            <view class="text-center p-[40rpx] text-muted" v-else> 暂无评价 </view>
        </div>
        <div style="height: 150px; width: 100vw"></div>
        <!-- <card title="用户评价" :url="`/bundle/pages/evaluate_goods/index?id=${goodsId}`">
			
		</card> -->

        <!-- 服务详情 -->
        <!-- <div style="min-height:250px; margin-top:20rpx;background-color:#fff;background-image:url('http://mzd-admin.muzhandao.com/api/uploads/image/20240911/5c91c13f-def1-413e-990b-d768bc48c765.png');background-size:100% 80rpx;background-repeat:no-repeat;    border-top-left-radius: 24rpx;    border-top-right-radius: 24rpx;">
            <div style="    display: flex;
                justify-content: space-between;padding:20rpx 30rpx;font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: rgba(255, 255, 255, 0.90);
            line-height: 38rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;">
                        <div style="display:flex">
                         详情介绍
            </div>
            
          </div> -->
        <mp-html :content="goodsData.content" @imgtap="imgtap" :preview-img="isPreview" />
        <!--  </div> -->
        <!-- <view style="padding-bottom: 350rpx">
			<card title="服务详情" :border_bottom="false">
				<view class="">
					<mp-html :content="goodsData.content" @imgtap="imgtap" :preview-img="isPreview" />
					//<u-parse :html="goodsData.content" @linkpress="imgtap"></u-parse>
				</view>
			</card>
		</view> -->
        <u-back-top :scroll-top="scrollTop" :custom-style="{ background: '#663d74' }"></u-back-top>
        <view class="footer" style="display: flex">
            <view class="" style="width: 15%" hover-class="none" hover-stop-propagation="false">
                <view class="flex" @click="handleCollection(goodsData.collect)" style="
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                    ">
                    <image class="collection" v-if="!goodsData.collect"
                        src="http://mzd-admin.muzhandao.com/api/uploads/image/20240911/c4f21567-606d-44a4-9121-76774d07b2a7.png">
                    </image>
                    <image class="collection" v-else
                        src="http://mzd-admin.muzhandao.com/api/uploads/image/20240911/9387ae06-fe19-405c-abe8-7435c22fd1f7.png">
                    </image>
                    <text style="color: #707070">{{ goodsData.collect ? '取消' : '收藏' }}</text>
                </view>
            </view>
            <view style="display: flex; width: 82%" v-if="!isBuy_id && isscanCode != '1'">
                <button class="text-lg text-white leading-[80rpx] h-[80rpx]" style="
                        flex: 1;
                        margin: 5px;
                        background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20241102/029ff3a7-ffc1-4a63-ae3f-45ccdffc2d01.png');
                        background-size: 100% 100%;
                        background-color: rgba(0, 0, 0, 0) important;
                    " @click="onAppointment(0)">
                    立即预约
                </button>
                <button class="text-lg text-white leading-[80rpx] h-[80rpx]" style="
                        flex: 1;
                        margin: 5px;
                        background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20241102/029ff3a7-ffc1-4a63-ae3f-45ccdffc2d01.png');
                        background-size: 100% 100%;
                        background-color: rgba(0, 0, 0, 0) important;
                    " v-if="goodsData.isBuy" @click="onAppointment(1)">
                    去团购
                </button>
            </view>
            <view class="" v-else-if="isscanCode == '1'" style="width: 100%">
                <button class="text-lg text-white leading-[80rpx] h-[80rpx]" style="
                        width: 100%;
                        margin: 5px;
                        background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/f6713e26-7427-4e71-b80a-da1d7388d4bc.png');
                        background-size: 100% 100%;
                        background-color: rgba(0, 0, 0, 0) important;
                    " @click="onAppointment(0)">
                    立即支付
                </button>
            </view>
            <view v-else>
                <button class="text-lg text-white leading-[80rpx] h-[80rpx]" style="
                        flex: 1;
                        margin: 5px;
                        background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/f6713e26-7427-4e71-b80a-da1d7388d4bc.png');
                        background-size: 100% 100%;
                        background-color: rgba(0, 0, 0, 0) important;
                    " v-if="goodsData.isBuy" @click="onAppointment(1)">
                    一键拼单
                </button>
            </view>
        </view>
    </view>

    <view v-show="!isEmpty" class="empty">
        <u-empty text="抱歉，该服务项目不存在~" :src="'/static/images/empty/collection.png'" :icon-size="300" color="#888888">
            <template #bottom>
                <view class="empty-bottom">
                    <button class="text-lg text-white leading-[80rpx] h-[80rpx]" @click="goHome" style="
                            flex: 1;
                            margin: 5px;
                            background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/f6713e26-7427-4e71-b80a-da1d7388d4bc.png');
                            background-size: 100% 100%;
                            background-color: rgba(0, 0, 0, 0) important;
                        ">
                        去看看其它
                    </button>
                </view>
            </template>
        </u-empty>
    </view>

    <cheap-popup ref="cheapRef">
        <template #couponDescOne>
            <view class="text-xs text-[#999]"> 已领取优惠券(共x张) </view>
        </template>
        <template #couponDescTwo>
            <view class="text-xs mt-4 text-[#999]"> 待领取优惠券(共x张) </view>
        </template>
    </cheap-popup>
</template>

<script setup lang="ts">
import { ref, reactive, shallowRef, unref } from 'vue'
import { onLoad, onShow, onUnload, onShareAppMessage, onPageScroll } from '@dcloudio/uni-app'
import LaSwiper from '@/components/la-swiper/la-swiper.vue'
import Card from './components/card.vue'
import GoodsSpec from './components/goods-spec.vue'
import Price from '@/components/price/index.vue'
import {
    apiGoodsDetail,
    apiGoodsCollection,
    apiGoodsCollectionCancel,
    apispecification
} from '@/api/goods'
import { apiEvaluateGoodsLists } from '@/api/goods'
import { removeStorageData } from '@/utils/util'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import { log } from 'console'

type GOODS = {
    name: string // 服务名称
    remarks: string // 服务简介
    unit: string // 单位描述
    image: string // 主图
    price: string // 价格
    scribingPrice: number // 划线价格
    content: string // 服务详情
    orderNum: string // 预约人数
    collect: string // 是否收藏
    isManualDispatch: number | any
    goodsImageList: any // 轮播图
    goods_comment: any // 服务评价
    isBuy: any // 服务评价
    outNumber: number // 超出数量
    staffList: any // 服务师傅
    list: any //  服务规格
    [index: string]: string | number | any
}

type TIME = {
    year: string
    date: string
    start_time: string
    end_time: string
}

const goodsData = reactive<GOODS>({
    name: '',
    remarks: '',
    unit: '',
    image: '',
    price: '',
    scribingPrice: 0,
    content: '',
    orderNum: '',
    collect: '',
    collectId: '',
    isManualDispatch: '',
    isBuy: 0,
    outNumber: 0,
    goodsImageList: [],
    goods_comment: [],
    staffList: [],
    list: [],
    buyNumber: 0
})
const userStore = useUserStore()
const isEmpty = ref(true)
const goodsId = ref<number | string>('')
const isBuy_id = ref<number | string>('')
const goodsSpecRef = shallowRef<InstanceType<typeof GoodsSpec> | any>()
const appointTime = ref<TIME>({
    year: '',
    date: '',
    start_time: '',
    end_time: ''
})
const isPreview = ref(false)
const scrollTop = ref<number>(0)
const isscanCode = ref()
// 获取商品详情
const appStore = useAppStore()
const priceTitle = ref()
const initGoodaDetail = async (): Promise<void> => {
    try {
        const res: GOODS = await apiGoodsDetail({
            id: goodsId.value,
            cityId: appStore.cityInfo.city_id
        })
        for (const key in goodsData) {
            if (res[key] != null && res[key] != undefined) {
                goodsData[key] = res[key]
            }
        }
    } catch (error) {
        console.log(error)
        isEmpty.value = false
    }
    uni.setNavigationBarTitle({
        title: goodsData.name
    })
    getUserEvaluateLists()
}

// 获取用户评价
const getUserEvaluateLists = async () => {
    const { lists } = await apiEvaluateGoodsLists({
        goodsId: +goodsId.value
    })
    goodsData.goods_comment = lists
    goodsData.goods_comment = goodsData.goods_comment.slice(0, 5)
    console.log('评价：', lists)
}

// 收藏操作
const handleCollection = async (collect: boolean | string | null): Promise<void> => {
    if (!userStore.isLogin) {
        return uni.$u.toast('请先登录!')
    }
    try {
        collect ? collectionCancel() : collection()
    } catch (error) {
        console.log('收藏请求错误', error)
    }
}

// 取消收藏
const collectionCancel = async () => {
    await apiGoodsCollectionCancel({
        id: unref(goodsData.collectId)
    })
    initGoodaDetail()
}

// 收藏
const collection = async () => {
    await apiGoodsCollection({
        goodsId: unref(goodsId)
    })
    initGoodaDetail()
}

// 立即预约
const onAppointment = (isBuy: any) => {
    goodsSpecRef.value.showPop = true
    priceTitle.value = 0
    console.log(goodsData)
    console.log(isBuy)
    console.log('goodsData')
    if (isBuy == 0) {
        priceTitle.value = goodsData.price
        uni.setStorageSync('isBuyFlag', 0)
    } else {
        priceTitle.value = goodsData.buyNumber
        uni.setStorageSync('isBuyFlag', 1)
    }
}

// 处理预约
const handleOrder = (goodsNum: number, goodsSpecificationId: number, goodsoutNumber: number) => {
    try {
        const goods = {
            goods_num: goodsNum,
            id: goodsSpecificationId,
            goodsoutNumber: goodsoutNumber,
            isBuyFlag: uni.getStorageSync('isBuyFlag')
        }

        console.log(goodsData, goodsData.isManualDispatch, 'goodsData.name')

        if (isscanCode.value == '1') {
            const params = {
                goodsData: goods,
                appointData: unref(appointTime)
            }
            goPage(`/pages/order_buy/index?params=${JSON.stringify(params)}`)
        }

        // if(goodsData.name.indexOf('包年服务')!=-1){
        if (goodsData.isManualDispatch == 1) {
            console.log(goodsData, '是包年服务呢')

            const date_ = new Date()
            const params = {
                goodsData: goods,
                appointData: {
                    year: date_.getFullYear(),
                    date: date_.getMonth() + 1 + '-' + date_.getDate(),
                    start_time: '07:00',
                    end_time: '20:00'
                }
            }
            goPage(`/pages/order_buy/index?params=${JSON.stringify(params)}`)
        } else {
            unref(appointTime).date = ''
            if (unref(appointTime).date === '') {
                return goPage(`/bundle/pages/appoint_time/index?params=${JSON.stringify(goods)}`)
            } else {
                const params = {
                    goodsData: goods,
                    appointData: unref(appointTime)
                }
                goPage(`/pages/order_buy/index?params=${JSON.stringify(params)}`)
            }
        }
    } catch (error) {
        console.log('处理预约', error)
    }
}
// 规格
const getspecification = () => {
    try {
        const params = {
            goodsId: goodsId.value
        }
        apispecification(params).then((res) => {
            console.log(res, 'res')
            goodsData.list = res.lists
        })
    } catch (error) {
        console.log('请求规格异常', error)
    }
}

const goPage = (url: string) => {
    uni.navigateTo({ url: url })
}

const imgtap = (e: Record<string, any>) => {
    if (e['data-href']) {
        // 跳转img中定义的链接
        window.location = e['data-href']
    } else {
        wx.previewImage({
            urls: [e.src] // 仅预览单张图片
        })
    }
}

// 返回首页
const goHome = () => {
    uni.reLaunch({ url: '/pages/index/index' })
}

const cheapRef = ref()
const cheapOpen = () => {
    cheapRef.value.open()
}

onShareAppMessage(() => {
    return {
        title: `分享给好友`,
        imageUrl: '123'
    }
})

onShow(() => {
    removeStorageData('selectDate')
})
const decodeAndSplitString = (str: string) => {
    const decodedString = decodeURIComponent(str)
    const pairs = decodedString.split('&')
    const result: { [key: string]: string } = {}

    pairs.forEach((pair) => {
        const [key, value] = pair.split('=')
        result[key] = value
    })

    return result
}
const options2 = ref()
onLoad((options: any) => {
    console.log(options)
    options2.value = options
    console.log('=================================')
    // 分享跳过了的，需要带着参数付款的时候传过去
    uni.setStorageSync('isscanCode', '0')
    if (options.isBuy_id) {
        uni.setStorageSync('isBuy_id', options.isBuy_id)
        isBuy_id.value = options.isBuy_id
    } else {
        uni.setStorageSync('isBuy_id', 0)
        isBuy_id.value = options.isBuy_id
    }

    if (options.scene) {
        const code = decodeAndSplitString(options.scene)
        goodsId.value = code.id
        initGoodaDetail()

        if (code.userId) {
            uni.setStorageSync('zfuserId', code.userId)
        } else {
            uni.setStorageSync('zfuserId', '')
        }

        if (code.scanCode == '1') {
            isscanCode.value = '1'
            uni.setStorageSync('isscanCode', '1')
        } else {
        }
    } else {
        goodsId.value = options?.id || 0

        initGoodaDetail()
    }
    getspecification()
    // 监听上门时间选择
    uni.$on('appointTime', (event: TIME) => {
        appointTime.value = event
    })
    uni.$on('updatepriceTitle', (event) => {
        console.log(event)
        priceTitle.value = event
    })
})

onUnload(() => {
    uni.$off(['appointTime'])
})
onPageScroll((e) => {
    console.log('页面滚动了', e)
    scrollTop.value = e.scrollTop
})
const goPage2 = (url: any) => {
    if (!url) return
    uni.navigateTo({
        url: url
    })
}
</script>

<style lang="scss">
// 收藏图标
.collection {
    width: 44rpx;
    height: 44rpx;
}

.padding {
    padding: 0 30rpx;
}

.line-3 {
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; // 弹性伸缩盒
    -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

// 底部按钮
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 22rpx rgba($color: #000000, $alpha: 0.2);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

// 服务下架或不存在时
.empty {
    padding-top: 200rpx;

    .empty-bottom {
        width: 90vw;
        margin-top: 130rpx;
    }
}

.scribingPrice {
    border-radius: 25px 25px 0px 0px;
    // background: rgb(255,117,41);
    background: rgb(66, 34, 86);
    position: relative;
    width: 100%;
    top: -80px;
    height: 80px;
    margin-bottom: -80px;
    color: white;
    line-height: 40px;
}

.yugu {
    padding-left: 10px;
}

.yuanjia {
    padding-left: 10px;
}

.timeLimit {
    width: 100vw;
    height: 184rpx;
    background: linear-gradient(270deg, #ff2e39 61%, rgba(255, 46, 57, 0) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240908/85f8c97b-d6f5-4624-83a6-ca44cac47ca0.png');
    background-size: 100% 100%;
    padding-top: 20rpx;
    padding-left: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: -25px;

    .lefttop {
        background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240908/6fed7be3-81a8-462d-8fae-0fa4061ccca6.png');
        background-size: 100% 100%;
        width: 172rpx;
        height: 52rpx;
    }

    .leftbottom {
        display: flex;
        align-items: flex-end;
        height: 72rpx;
        padding-left: 30rpx;
        margin-top: -14px;

        .text1 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
            line-height: 33rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
        }

        .text2 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 42rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
        }

        .text3 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 72rpx;
            color: #ffffff;
            line-height: 72rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
        }

        .text4 {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(255, 255, 255, 0.65);
            line-height: 33rpx;
            text-align: right;
            font-style: normal;
            text-decoration-line: line-through;
            text-transform: none;
        }
    }
}

.titleview_1 {
    width: 100vw;
    height: 150rpx;
    background: #ffffff;
    border-radius: 25rpx;
    /* margin-top: -25px; */
    padding-top: 32rpx;
    padding-left: 28rpx;

    .topView {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 36rpx;
        color: #222222;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .bottomView {
        margin-top: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ff2e39;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.backgroundlinear {
    background-color: rgba(249, 249, 249, 1) !important;
}
</style>
